import React from 'react'
import { _,Container, Button } from '@/core';
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'

import "./Detail.less";
const rightIcon = (
    <svg t="1660470080783" className="icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="4939" width="28" height="28">
        <path d="M256 64l448 448-448 448z" fill="#515151" p-id="4940"></path>
    </svg>
)
const getState = function(){
    let pathname = _.his.location.pathname;
    let names = pathname.split("/");
    let key = names[2].replace(/\d/g,'');
    let menu = global.MENU[key];
    return {
        menu:menu,
        menuKey:pathname,
        _title:'',
        _create:'',
        _text:''
    }
}

class Index extends React.Component {
    getArticle = ()=> {
        let names = _.his.location.pathname.split("/");
        let id = names.pop();
        let categoryId = names.pop();
        _.api("page.article",{params:{"id":id}}).then((res) => {
            let detail = res.detail;
            this.setState({
                _title:detail.title,
                _create:detail.modified,
                _text:detail.content
            })
        })
        //
        _.api("page.articleList",{params:{"categoryId":categoryId,count:5}}).then((res) => {
            this.setState({
                categoryId:categoryId,
                categoryName:{'1':'公司要闻','2':'媒体聚焦','3':'行业动态','4':'子公司报道'}[categoryId+''],
                categoryList:res.list
            })
        })
    }


    state = getState()

    UNSAFE_componentWillMount(){
        this.getArticle();
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        let state = getState();
        if(state.menuKey != this.state.menuKey){
            this.setState(state);
            this.getArticle();
        }
    }

    render(){
        let st = this.state;
        let menu = this.state.menu;
        let menuKey = this.state.menuKey;
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container className="detail_content flr">
                    <div className="flbox rightContent">
                        <h3 className="title">{this.state._title}</h3>
                        <h5 className="memo">发布时间：{this.state._create}</h5>
                        <div className="content">
                            <div dangerouslySetInnerHTML={{__html:global.httpTxt(this.state._text)}}></div>
                        </div>
                    </div>
                    {
                        st.categoryList && (
                            <div className="flone leftmenu">
                                <div>
                                    <div className="title">{st.categoryName}</div>
                                    {
                                        st.categoryList.map((v,i)=>{
                                            return (
                                                <div className={`item`} key={i} onClick={()=>_.his.push(`/listDetail/${st.categoryId}/${v.id}`)}>
                                                    {v.title}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    }
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default Index;
